<style lang='scss' scoped>
.item {
  .info {
    padding: 0 20px;
    font-size: 14px;
    .order_num {
      text-align: right;
    }
    .xiangxi {
      text-align: right;
      color: #ff5d13;
    }
  }
  .steps {
    // background-color: red;
    .text {
      padding: 0 20px;
      text-align: right;
      color: red;
    }
  }
}
</style>
<template>
  <div class="item">
    <!-- 时间  订单号码  详细 -->
    <van-row class="info">
      <van-col class="date" span="8">2021年01月19日</van-col>
      <van-col class="order_num" span="12">订单编号：3452452</van-col>
      <van-col class="xiangxi" span="4">详细 ></van-col>
    </van-row>
    <!-- 步骤条 -->
    <div class="steps">
      <van-steps
        direction="vertical"
        :active="0"
        active-icon="location"
        active-color="#FF8858"
        inactive-icon="location"
        inactive-color="#0068FE"
      >
        <van-step>
          <h3>【起】{{ $store.state.startData }}</h3>
        </van-step>
        <van-step>
          <h3>【终】{{ $store.state.endData }}</h3>
        </van-step>
      </van-steps>
      <!-- 车辆类型和价格 -->
      <div class="text">小面包车<span>￥15</span></div>
      <van-divider dashed></van-divider>
    </div>
  </div>
</template>

<script>
export default {};
</script>